<!--  -->
<template>
  <div>
    <Card>
      <div slot="title" >
         <Button @click="modal_process=true" class="zh-hollow" type="primary" icon="plus-round">新增流程</Button>
      </div>
      <Form :model="formItem" :label-width="70">
        <Row :gutter="10" type="flex"  align="middle"  >
          <Col span="8">
              <FormItem label="流程名称">
                <Input v-model="formItem.name" placeholder="流程名称"></Input>
              </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="对应模块">
                <Select v-model="formItem.module" filterable>
                    <Option  v-for="item in moduleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="使用情况">
                <Select v-model="formItem.useState" filterable>
                    <Option  v-for="item in useStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
          </Col>
        <!-- </Row>
        <Row> -->
          <Col span="12">
            <FormItem label="新增时间">
                <DatePicker v-model="formItem.timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="10" >
          <Col span="8" offset="16"  style="text-align:right;">
              <Button class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
          </Col>       
        </Row>
      </Form>
    </Card>
    <Card style="margin-top:10px;" :padding="0">
      <Table :loading="loading" border :columns="columns" :data="data"></Table>
      <Page :total="total" show-total show-sizer></Page>
    </Card>
    <Modal v-model="modal_process" title="新增流程"  ok-text="开始设置流程" cancel-text="放弃操作" :mask-closable="false">
      <Form  :model="processForm" :label-width="80" style="padding:15px 30px;">
        <FormItem label="流程名称">
          <Input v-model="processForm.name" ></Input>
        </FormItem>
        <FormItem label="对应模块">
          <Select v-model="processForm.module" filterable>
              <Option  v-for="item in moduleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="使用情况">
          <Select v-model="processForm.useState" filterable>
              <Option  v-for="item in useStateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="使用客户">
          <Select v-model="processForm.customer" filterable>
              <Option  v-for="item in customerList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
name:'',
  data () {
    return {
      modal_process:false,
      total:6,
      loading:true,
      processForm:{
        name:'',
        module
      },
      formItem:{
        name:'',
        module:'',
        useState:'',
        timeRange:''
      },
      customerList:[],
      moduleList:[],
      useStateList:[],
      columns:[
        {
          key:'name',
          title:'流程名称',
          align:'center',
          minWidth:150
        },{
          key:'module',
          title:'对应模块',
          align:'center',
          minWidth:100
        },{
          key:'useState',
          title:'使用情况',
          minWidth:100,
          align:'center'
        },{
          key:'customer',
          title:'使用客户',
          minWidth:150,
          align:'center'
        },{
          key:'time',
          title:'新增时间',
          align:'center',
          minWidth:150
        },{
          key:'action',
          title:'操作',
          align:'center',
          fixed:'right',
          minWidth:200,
          render:(h,params)=>{
            return h('div',[
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#2D8CF0'
                },
                on:{
                  click:()=>{
                    
                  }
                }
              },'查看'),
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#2D8CF0'
                },
                on:{
                  click:()=>{
                    
                  }
                }
              },'编辑'),
              h('Button',{
                props:{
                  type:'text',
                  size:'small'
                },
                style:{
                  color:'#EA0000'
                },
                on:{
                  click:()=>{
                    let config={
                      title:'删除流程',
                      content:'删除专用流程后，相应的客户将使用通用流程。',
                      okText:'删除',
                      cancelText:'放弃操作',
                      onOk:()=>{
                        console.log('撤销了')
                      }
                    }
                    this.$Modal.confirm(config)
                  }
                }
              },'删除')
            ])
          }
        }
      ],
      data:[
        {
          name:'通用的设备报修',
          module:'设备报修',
          useState:'通用',
          customer:'-',
          time:'2017-08-18 18:00'
        }
      ]
    };
  },
  methods:{
  },
  created(){
    let that=this;
    setTimeout(()=>{
      that.loading=false;
    },2000)
  }
}

</script>
<style lang='scss' >
</style>